import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Link } from 'react-router'
import cx from 'classnames'
import styles from './appear.css'
import Paid from './paid/paid'

class Appear extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }
    componentDidMount() {
        _.delay(function() {
            $('wb:topic').children("iframe").contents().find('html').find(".topic_publisher").empty();
        }, 3000)
    }

    static weibo_template = `
        <wb:topic column="n" border="n" width="550" height="800" tags="%E7%BF%BB%E8%AF%91" language="zh_cn"
            version="base" appkey="5v7KEA" refer="n" footbar="n" url="http%3A%2F%2Fswallow.com" filter="y" ></wb:topic>
    `;

    render() {
        return (
            <div id={styles.root}>

                <div id={styles.canvas}>
                    <div className="ui container">

                        <div id={styles.channel} className="fn-left">
                            <div className="ui buttons">
                                <button className="ui button massive red">
                                    <i className="download icon"></i>
                                    Get Browser Extension
                                </button>
                                <div className={"or " + styles.or}></div>
                                <button className="ui button massive green">
                                    <i className="apple icon"></i>
                                    Mobile App
                                </button>
                            </div>
                        </div>

                        <div id={styles.video_circle} className="fn-right">
                            <a className={styles.video_button} href="#"></a>
                        </div>
                    </div>
                </div>

                <div id={styles.show} className="ui container">
                    <div className={styles.item}>
                        item1
                    </div>
                    <div className={styles.item}>
                        item2
                    </div>
                    <div className={styles.item}>
                        item3
                    </div>
                </div>

                <div id={styles.discussion} className="ui container">
                    <div className="ui grid">
                        <div className="eight wide column">
                            <ul className={styles.quotes}>
                              <li>
                                  <div className="quote" >Readlang is probably my top resource now for learning new languages. Whenever I don't feel like studying properly, I can just read an article in a foreign language and enjoy it, without having to worry about looking up words that I don't understand. It makes reading in a foreign language a much quicker and more enjoyable experience!</div>
                                  <span className="source"><a href="#">Alex Rawlings, Language Teacher &amp; Polyglot</a></span>
                              </li>

                              <li>
                                  <div className="quote" >Readlang is one of the best language learning tools I’ve ever used. It is especially good for helping you get past the beginner levels of a language and into the intermediate and advanced stages.</div>
                                  <span className="source"><a href="#">Ron Gullekson, Language Surfer</a></span>
                              </li>

                              <li>
                                  <div className="quote" >It is difficult to give something that is so young a five star rating, but this is already one of the best sites (along with stuff like Anki, Memrise, "X"Pod, Duolingo, LingQ, etc.) around for this and it is only getting better.</div>
                                  <span className="source"><a href="#">Joseph Heavner, Quora</a></span>
                              </li>
                              <li>
                                  <div className="quote" >I love being able to upload videos from YouTube and sync the lyrics to them [...] And, the ability to instantly have words that I click on made into flash cards (that can be exported to Anki) is great, too. This site has so much to offer. :)</div>
                                  <span className="source"><a href="#">Lyarra, Duolingo Discussion</a></span>
                              </li>
                              <li>
                                  <div className="quote" >This is one of the most fantastic language learning tools I have ever encountered. I can progress quickly through a book I’ve never read, and more importantly, it’s enjoyable [...] and it serves as a great set of self-made index cards.</div>
                                  <span className="source"><a href="#">Foreigner on German Soil</a></span>
                              </li>
                            </ul>
                        </div>
                        <div className="eight wide column">
                            { /* <div dangerouslySetInnerHTML={{__html: Appear.weibo_template}}></div> */ }
                        </div>
                    </div>
                </div>

                <div id={styles.statistic}>
                    <div className="ui container  fn-tac">
                        <div className="ui statistics four">
                            <div className={styles.statistic + " statistic grey"}>
                                <div className="value"> <i className="users icon"></i> 1234 </div>
                                <div className="label">Users </div>
                            </div>
                            <div className={styles.statistic + " statistic violet"}>
                                <div className="value"><img src="/images/joe.jpg" className="ui circular inline image" /> 46 </div>
                                <div className="label">Members </div>
                            </div>
                            <div className={styles.statistic + " statistic red"}>
                                <div className="value"> <i className="translate icon"></i> 628 </div>
                                <div className="label">Articles </div>
                            </div>
                            <div className={styles.statistic + " statistic green"}>
                                <div className="value"> <i className="tags icon"></i> 86456 </div>
                                <div className="label">Cases </div>
                            </div>
                        </div>

                        <button className={"ui button big black " + styles.button}>
                            <i className="book icon"></i>
                            browse our library ...
                        </button>
                    </div>
                </div>

                <Paid />

                <div id={styles.channel2} className="ui container fn-tac">
                    <div className="ui buttons">
                        <button className="ui button massive red">
                            <i className="download icon"></i>
                            Get Browser Extension
                        </button>
                        <div className={"or " + styles.or}></div>
                        <button className="ui button massive green">
                            <i className="apple icon"></i>
                            Mobile App
                        </button>
                    </div>
                </div>

            </div>
        )
    }
}

export default Appear
